#@adminLayout()
#define main()
<div class="jbolt_page" data-key="/demo/multiplefilesyncuploader" >
<div class="jbolt_page_title">
	<h1>Bootstrap-fileinput组件文件上传演示</h1>
</div>
<div class="jbolt_page_content">

<div class="row">

<div class="col-12">
<div class="card">
<div class="card-header">多文件同步批量上传</div>
<div class="card-body">
<div class="alert alert-primary">
注意：上传组件需要放在form表单外面，不随表单提交文件数据，上传组件选择文件后会显示名称，并且自动ajax上传文件后返回地址，
然后需要设置到一个隐藏域里就可以了。具体请看multiplefilesyncuploader.html
</div>
<!-- 示例代码 -->
<form onsubmit="return FormChecker.check(this);"  id="fileSyncuploaderForm" action="demo/multiplefilesyncuploader/submit" method="post">
	<input type="text" data-rule="required" readonly="readonly" data-tips="请在下方选择文件上传" name="fileUploaderDemo" id="fileSyncUploaderDemo" value="#(fileUploaderDemo??)" class="form-control"/>
	<small class="text-danger">这里需要实际项目中做成隐藏域</small>
	<br/>
	<button  type="submit" class="btn btn-primary"><i class="fa fa-check mr-1">提交表单</i></button>
</form>
<fieldset class="form-page-fieldset">
<legend>上传文件-多文件</legend>
#if(msg)
<div class="alert alert-danger">
#(msg??)
</div>
#end
#setLocal(inputId=RandomUtil.random(6))
<div class="form-group text-center">
<input type="file" id="fileInput_#(inputId)"  class="file-loading" data-max-filecount="8" data-uploadurl="/demo/multiplefilesyncuploader/upload" data-choosebtntext="选择图片" data-theme="explorer-fa" multiple="multiple" data-multiplefileinput  name="file" accept="image/*" data-max-filesize="300" data-sync="true" data-extrahandler="processExtraHandler1" data-handler="setValueTo" data-setvalueto="fileSyncUploaderDemo"/>
</div>
</fieldset>
	
</div>
</div>
</div>
 
</div>
</div>
</div>
#end

#define js()
<script>
function processExtraHandler1(input){
	console.log("在这里初始化其他事件处理");
}
$(function(){
})
</script>
#end
